<template>

  <!-- 主页这里面把common里面的三个页面引入进来也就是头部 菜单 尾部   (分别要导入注册使用)-->
      <div class="home">
  <Header/>
  <el-container class="content">
      <Menu/>
   <el-container>

  <el-main>

    <Bread />
    <router-view></router-view>

  </el-main>
      <el-footer><Footer/></el-footer> 
      </el-container>
  </el-container>
  </div>

</template>





<script>
import Header from '@/components/common/Header.vue'
import Menu from '@/components/common/Menu.vue'
import Footer from '@/components/common/Footer.vue'

import Bread from '@/components/common/Bread.vue'

export default {
  name: 'HomePage',
  components: { Header, Menu, Footer,Bread },
  data () {
    return {
      
    }
  },

}



</script>


<style lang="scss">
.home {
  width: 100%;
  height: 100vh; /* 使用视口高度，确保占满整个屏幕高度 */
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
}
.content {
  flex: 1; /* 让中间内容区域占据剩余的垂直空间 */
  display: flex;
  flex-direction: row; /* 水平方向排列 Menu 和 右侧容器 */
}

.main-container {
  flex: 1; /* 让右侧容器（包含 el-main 和 el-footer）占据剩余水平空间 */
  display: flex;
  flex-direction: column; /* 垂直方向排列 el-main 和 el-footer */
}

el-main {
  flex: 1; /* 让 el-main 占据剩余垂直空间 */
}

/* 可以根据需要给 Header、el-footer 设置固定高度等样式 */
Header {
  height: 60px;
}

el-footer {
  height: 60px;
}



</style>